import * as React from "react";
import { ToolFormProps } from "../interfaces";
import { t } from "i18next";
import {
  Row,
  Col,
  Widget,
  WidgetBody,
  WidgetHeader,
  BlurableInput,
  SaveBtn
} from "../../ui/index";
import { getArrayStatus } from "../../resources/tagged_resources";
import { edit, destroy, init, saveAll } from "../../api/crud";
import { ToolTips } from "../../constants";
import { TaggedTool, SpecialStatus } from "farmbot";

export class ToolForm extends React.Component<ToolFormProps, {}> {
  taggedTool = (name: string): TaggedTool => {
    return {
      uuid: "ERROR: GENERATED BY REDUCER - UUID SHOULD BE UNSEEN",
      specialStatus: SpecialStatus.SAVED,
      kind: "Tool",
      body: { name }
    };
  }

  emptyTool = (): TaggedTool => {
    return this.taggedTool(t("Tool ") + (this.props.tools.length + 1));
  }

  stockTools = (dispatch: Function) => {
    const newTool = (name: string) => {
      dispatch(init(this.taggedTool(name)));
    };

    newTool(t("Seeder"));
    newTool(t("Watering Nozzle"));
    newTool(t("Weeder"));
    newTool(t("Soil Sensor"));
    newTool(t("Seed Bin"));
    newTool(t("Seed Tray"));
  }

  render() {
    const toggle = () => this.props.toggle();
    const { dispatch, tools, isActive } = this.props;
    const specialStatus = getArrayStatus(tools);
    return <Widget>
      <WidgetHeader helpText={ToolTips.TOOL_LIST} title="Tools">
        <button
          className="fb-button gray"
          onClick={() => { toggle(); }}
          hidden={!!specialStatus}>
          {t("Back")}
        </button>
        <SaveBtn
          status={specialStatus}
          onClick={() => {
            dispatch(saveAll(tools, () => { toggle(); }));
          }} />
        <button
          className="fb-button green"
          onClick={() => { dispatch(init(this.emptyTool())); }}>
          <i className="fa fa-plus" />
        </button>
        <button
          className="fb-button green"
          onClick={() => { this.stockTools(dispatch); }}>
          <i className="fa fa-plus" style={{ marginRight: "0.5rem" }} />
          {t("Stock Tools")}
        </button>
      </WidgetHeader>
      <WidgetBody>
        <Row>
          <Col xs={12}>
            <label>{t("Tool Name")}</label>
          </Col>
        </Row>
        {tools.map((tool: TaggedTool, index: number) => {
          const inSlotClass = isActive(tool) ? "pseudo-disabled" : "";
          return <Row key={index}>
            <Col xs={10}>
              <BlurableInput
                id={(tool.body.id || "Error getting ID").toString()}
                value={tool.body.name || "Error getting Name"}
                onCommit={(e) => {
                  dispatch(edit(tool, { name: e.currentTarget.value }));
                }} />
            </Col>
            <Col xs={2}>
              <button
                className={`fb-button red ${inSlotClass}`}
                title={isActive(tool) ? t("in slot") : ""}
                onClick={() => { dispatch(destroy(tool.uuid)); }}>
                <i className="fa fa-times"></i>
              </button>
            </Col>
          </Row>;
        })}
      </WidgetBody>
    </Widget>;
  }
}
